<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骡窝窝娱乐</title>

    <!--图标样式-->
    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

    <!--主要样式-->
    <link rel="stylesheet" type="text/css" href="/css/style7.css"/>

</head>
<body>

<div class='menu'>
    <div class='menu-wrapper'>
        <ul class='menu-items'>
            <li class='menu-item'>
                <button class='menu-item-button b1'>
                    <i class='fa fa-reply-all'></i>
                </button>
                <div class='menu-item-bounce'></div>
            </li>
            <li class='menu-item'>
                <button class='menu-item-button b2'>
                    <i class='fa fa-music'></i>
                </button>
                <div class='menu-item-bounce'></div>
            </li>
            <li class='menu-item'>
                <button class='menu-item-button b3'>
                    <i class='fa fa-gamepad'></i>
                </button>
                <div class='menu-item-bounce'></div>
            </li>
        </ul>
        <button class='menu-toggle-button'>
            <i class='fa fa-plus menu-toggle-icon'></i>
        </button>
    </div>
</div>

<script src="/js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='/js/TweenMax.min.js' type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var menuItemNum = $(".menu-item").length;
        var angle = 120;
        var distance = 90;
        var startingAngle = 180 + (-angle / 2);
        var slice = angle / (menuItemNum - 1);
        TweenMax.globalTimeScale(0.8);
        $(".menu-item").each(function (i) {
            var angle = startingAngle + (slice * i);
            $(this).css({
                transform: "rotate(" + (angle) + "deg)"
            })
            $(this).find(".menu-item-icon").css({
                transform: "rotate(" + (-angle) + "deg)"
            })
        })
        var on = false;

        $(".menu-toggle-button").mousedown(function () {
            TweenMax.to($(".menu-toggle-icon"), 0.1, {
                scale: 0.65
            })
        })
        $(document).mouseup(function () {
            TweenMax.to($(".menu-toggle-icon"), 0.1, {
                scale: 1
            })
        });
        $(document).on("touchend", function () {
            $(document).trigger("mouseup")
        })
        $(".menu-toggle-button").on("mousedown", pressHandler);
        $(".menu-toggle-button").on("touchstart", function (event) {
            $(this).trigger("mousedown");
            event.preventDefault();
            event.stopPropagation();
        });

        function pressHandler(event) {
            on = !on;

            TweenMax.to($(this).children('.menu-toggle-icon'), 0.4, {
                rotation: on ? 45 : 0,
                ease: Quint.easeInOut,
                force3D: true
            });

            on ? openMenu() : closeMenu();

        }

        function openMenu() {
            $(".menu-item").each(function (i) {
                var delay = i * 0.08;

                var $bounce = $(this).children(".menu-item-bounce");

                TweenMax.fromTo($bounce, 0.2, {
                    transformOrigin: "50% 50%"
                }, {
                    delay: delay,
                    scaleX: 0.8,
                    scaleY: 1.2,
                    force3D: true,
                    ease: Quad.easeInOut,
                    onComplete: function () {
                        TweenMax.to($bounce, 0.15, {
                            // scaleX:1.2,
                            scaleY: 0.7,
                            force3D: true,
                            ease: Quad.easeInOut,
                            onComplete: function () {
                                TweenMax.to($bounce, 3, {
                                    // scaleX:1,
                                    scaleY: 0.8,
                                    force3D: true,
                                    ease: Elastic.easeOut,
                                    easeParams: [1.1, 0.12]
                                })
                            }
                        })
                    }
                });

                TweenMax.to($(this).children(".menu-item-button"), 0.5, {
                    delay: delay,
                    y: distance,
                    force3D: true,
                    ease: Quint.easeInOut
                });
            })
        }

        function closeMenu() {
            $(".menu-item").each(function (i) {
                var delay = i * 0.08;

                var $bounce = $(this).children(".menu-item-bounce");

                TweenMax.fromTo($bounce, 0.2, {
                    transformOrigin: "50% 50%"
                }, {
                    delay: delay,
                    scaleX: 1,
                    scaleY: 0.8,
                    force3D: true,
                    ease: Quad.easeInOut,
                    onComplete: function () {
                        TweenMax.to($bounce, 0.15, {
                            // scaleX:1.2,
                            scaleY: 1.2,
                            force3D: true,
                            ease: Quad.easeInOut,
                            onComplete: function () {
                                TweenMax.to($bounce, 3, {
                                    // scaleX:1,
                                    scaleY: 1,
                                    force3D: true,
                                    ease: Elastic.easeOut,
                                    easeParams: [1.1, 0.12]
                                })
                            }
                        })
                    }
                });


                TweenMax.to($(this).children(".menu-item-button"), 0.3, {
                    delay: delay,
                    y: 0,
                    force3D: true,
                    ease: Quint.easeIn
                });
            })
        }
    });
</script>

<script>

    $(".b1").click(function () {
        window.location.href = "http://localhost/mine/profiles.html";
    })

    $(".b2").click(function () {
        window.location.href = "http://localhost/mine/musicBox.html";
    })

    $(".b3").click(function () {
        window.location.href = "http://localhost/mine/game.html";
    })

</script>

</body>
</html>